import Editor from '@/components/editor';
import { SvgIcon } from '@/components/icon';
import { PlusOutlined, SaveOutlined } from '@ant-design/icons';
import { Button, Card, Input, Typography } from 'antd';
import { memo, useEffect, useState } from 'react';
import { QA } from '@/types/know/know';

interface Props {
  onAdded: (qa: QA & { id?: string }) => void;
  editValue?: QA & { id?: string };
  isUploading: boolean;
  confirmImport: () => void;
  qas: any;
}

const EditorPage = ({ onAdded, editValue, isUploading, confirmImport, qas }: Props) => {
  const [value, setValue] = useState<QA & { id?: string }>({ q: '', a: '<p><br></p>' });

  useEffect(() => {
    if (editValue) {
      setValue(editValue);
    }
  }, [editValue]);

  return (
    <>
      <div className="flex h-full w-full flex-col gap-3 rounded-md bg-[#FBFCFF80] p-4">
        <Input
          showCount
          maxLength={200}
          placeholder="请输入问题"
          bordered={false}
          value={value.q}
          onChange={(e) => {
            setValue((prev) => ({ ...prev, q: e.target.value }));
          }}
          style={{
            borderRadius: '6px',
            border: '1px solid #E5E6EB',
            background: '#fff',
          }}
        />
        <Editor
          placeholder="请输入答案"
          id="sample-editor"
          maxHeight={300}
          sample
          value={value.a}
          onChange={(e) => {
            if (e != value.a) {
              setValue((prev) => ({ ...prev, a: e }));
            }
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <Button
            type="text"
            icon={editValue?.id ? <SaveOutlined /> : <PlusOutlined />}
            onClick={() => onAdded(value)}
            style={{ border: '1px solid #1B6DFA', marginRight: '8px' }}
          >
            {editValue?.id ? '修改' : '添加'}
          </Button>

          <Button
            type="text"
            loading={isUploading}
            disabled={qas.length === 0 ? true : false}
            // className="ml-auto mr-10"
            style={{
              border:
                qas.length === 0 ? '1px solid var(--brand-color-disabled)' : '1px solid #1B6DFA',
              background: 'transparent',
            }}
            onClick={confirmImport}
            icon={<SvgIcon icon={qas.length === 0 ? 'adddata-disabled' : 'adddata'} size={20} />}
          >
            {/* <SvgIcon color="#BF63FF" icon="ri--layout-horizontal-fill" size={20} /> */}
            {isUploading ? '正在导入...' : '确定导入'}
          </Button>
        </div>
      </div>
    </>
  );
};

export default memo(EditorPage);
